<template>
  <Dropdown
    :placement=" isFirst? 'bottom': 'right-start'"
    :stop-propagation="true"
    :class="dropdownClass"
    @on-click="handleDropdownClick"
  >
    <div v-if="isFirst">
      <Icon :type="menu.meta.icon" class="drop-down-menu-icon" />
      {{menu.meta.name}}
      <Icon
        v-if="menu.children && menu.children.length > 0"
        type="ios-arrow-down"
        class="drop-down-menu-icon"
      />
    </div>
    <DropdownItem v-else :name="menu.fullPath">
      <div :style="{display:'flex', width:'100%'}">
        <div>
          <Icon :type="menu.meta.icon" class="drop-down-menu-icon" />
        </div>
        <div>{{menu.meta.name}}</div>
        <div :style="{flex: 1,textAlign: 'right'}">
          <Icon type="ios-arrow-forward" class="drop-down-sub-menu-icon"></Icon>
        </div>
      </div>
    </DropdownItem>
    <!-- 1如果有children -->
    <template v-if="menu.children && menu.children.length > 0">
      <DropdownMenu slot="list">
        <template v-for="(children, index) in menu.children">
          <template v-if="children.children && children.children.length > 0">
            <div :key="Uuid.v1()+index">
              <SiderDropdownMenu :isFirst="false" :menu="children" />
            </div>
          </template>
          <template v-else-if="children.meta.show">
            <DropdownItem :key="Uuid.v1()+index" :name="children.fullPath">
              <Icon :type="children.meta.icon" class="drop-down-menu-icon" />
              {{children.meta.name}}
            </DropdownItem>
          </template>
        </template>
      </DropdownMenu>
    </template>
  </Dropdown>
</template>

<script>
import { Dropdown, DropdownMenu, DropdownItem, Icon } from "view-design";
import Uuid from "uuid";
export default {
  name: "SiderDropdownMenu",
  components: {
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Icon
  },
  props: {
    menu: {
      type: Object,
      required: true
    },
    /** 是否是第一层 */
    isFirst: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data: function() {
    return {
      Uuid: Uuid
    };
  },
  computed: {
    dropdownClass() {
      let class1 = this.isFirst
        ? "larry-first-dropdown"
        : "larry-after-dropdown";
      let class2 =
        !this.menu.children || this.menu.children.length == 0
          ? "larry-dropdown-no-children"
          : "larry-dropdown-has-children";
      return class1 + " " + class2;
    }
  },
  mounted: function() {
    let menu = this.menu;
  },
  methods: {
    handleDropdownClick(fullPath) {
      this.$router.push(fullPath);
    }
  }
};
</script>

<style lang="less">
.larryyu-sider-menu {
  .drop-down-menu-icon {
    margin-right: 10px !important;
    font-size: 10px !important;
  }
  .drop-down-sub-menu-icon {
    font-size: 10px !important;
  }
  .ivu-select-dropdown {
    width: 133px !important;
  }
  .larry-first-dropdown {
    .ivu-select-dropdown {
      margin-left: 4px !important;
      margin-top: 10px !important;
    }
  }
  .larry-after-dropdown {
    .ivu-select-dropdown {
      margin-left: 2px !important;
      margin-top: -1px !important;
    }
  }
  .larry-dropdown-no-children {
    .ivu-select-dropdown {
      display: none !important;
    }
  }
}
</style>